<!--
  名称：基础地图组件
  用途：基于openlayers封装的通用地图组件
  作者：王禹
 -->
<template>
  <div style="height:500px; width:200px;">
      <!--地图主容器 -->
      <div id="_map_map" ></div>
  </div>
</template>

<script>
import Panel from './../Panel'
import olproj from 'ol/proj'
import Map from 'ol/map'
import View from 'ol/view'
import TileLayer from 'ol/layer/tile'
import TileArcGISRest from 'ol/source/TileArcGISRest'
import TileGrid from 'ol/tilegrid/tilegrid'
import TileImage from 'ol/source/tileimage'
import olcontrol from 'ol/control'
import MousePosition from 'ol/control/MousePosition'
import coordinate from 'ol/coordinate'
import Overlay from 'ol/Overlay'
import Select from 'ol/interaction/Select'
import OSM from 'ol/source/OSM'
import Vue from 'vue'

import Text from 'ol/style/Text'
import Fill from 'ol/style/fill'
import Stroke from 'ol/style/stroke'
import Feature from 'ol/feature'
import Style from 'ol/style/style'
import Icon from 'ol/style/Icon'
import VectorSource from 'ol/source/vector'
import Point from 'ol/geom/point'
import VectorLayer from 'ol/layer/vector'
import GeoJSON from 'ol/format/GeoJSON'

import { mapGetters } from 'vuex'

export default {
  data () {
    return {
      map: {},
      // 中心点
      centerPoint: {},
      // 描点的状态
      tracingPointState: {},
      // 描点图层
      tracingPointLayers: {},
      // geoJSON解析器
      geoJSON: {},
      // 当前选中的点
      selectedFeature: {},
      // 当前覆盖层，即点击点弹出的窗口
      overlay: {},
      //
      select: {}
    }
  },
  computed: {
    // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters([
      'getLayerArray'
    ])
  },
  // 在实例创建以后，初始化全部组件状态数据
  created: function () {
    this.geoJSON = new GeoJSON()
    // 初始化面板状态
  },
  methods: {
  },
  mounted: function () {
    // 获取坐标系参数
    var projection = olproj.get('EPSG:4326')
    // 分辨率
    var resolutions = [
      0.0027363801567048224,
      0.0017845957543727103,
      0.00118973050291514,
      7.138383017490841e-4,
      3.5691915087454206e-4,
      1.6656227040811962e-4,
      8.328113520405981e-5,
      5.9486525145757005e-5,
      4.1640567602029906e-5,
      2.3794610058302804e-5,
      1.7845957543727102e-5,
      1.1897305029151402e-5,
      8.32811352040598e-6,
      4.75892201166056e-6,
      2.37946100583028e-6
    ]
    // 贴图组
    var tilegrid = new TileGrid({
      origin: [-400, 400],
      resolutions: resolutions,
      tileSize: 256
    })
    // 地图服务来源
    var source = new TileImage({
      projection: projection,
      tileGrid: tilegrid,
      tileUrlFunction: function (tileCoord, pixelRatio, proj) {
        if (!tileCoord) {
          return ''
        }
        var z = tileCoord[0]
        var x = Math.abs(tileCoord[1])
        var y = Math.abs(tileCoord[2]) - 1

        return (
          'http://10.32.208.34:6080/whgis/rest/services/BaseGeography/2015年卫星影像/MapServer/tile/' +
          // "http://www.tiandituhubei.com:6080/arcgis/rest/services/IMG_ZY3_HB/MapServer/tile/"+
          z +
          '/' +
          y +
          '/' +
          x
        )
      }
    })
    // 构建地图图层
    var plan_layer = new TileLayer({
      source: source
    })

    // 地图参数
    let option = {
      layers: [
        plan_layer
      ],
      target: '_map_map',
      view: new View({
        // [114.30878471, 30.591228],
        center: olproj.transform(
          [114.30878471, 30.591228],
          'EPSG:4326',
          // 正式
          'EPSG:3857'
        ),
        zoom: 12
      })
    }
    // 创建地图
    this.map = new Map(option)
  },
  components: {},
  // 组建接受的传入参数
  props: [
    // 标题
    'title',
    // 地图数据来源
    'mapSourceUrl',
    // 描点配置(该配置描述描点ID、应该使用的图标地址、字体、字体颜色、边框颜色、GeoJson数据地址)
    'tracingPointOptions',
    // 描点被点击事件的回调函数
    'selectCallback'
  ]
}
</script>
<style>
@import "./../../assets/css/ol.css";

</style>
